<template>
  <div
    class="g-clickable g-card-button-gradient button-base"
    :class="`${status}`"
    :style="{ width: width }"
    @click="click"
    tabindex="0"
  >
    <span>{{ label }}</span>
    <slot />
  </div>
</template>

<script>
export default {
  name: "ButtonBase",
  props: {
    status: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "100%",
    },
  },
  methods: {
    click() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss">
.button-base {
  height: 45px;
  border-radius: 25px;

  span {
    font-size: 16px;
    font-family: "Roboto Bold";
    color: var(--color);
  }
}
</style>
